<template>
  <div class="mtop-20">
    <el-card>
      <div class="font-20 font-bold">编辑个人信息</div>
      <div class="edit-wrap mtop-20">
        <el-form class="edit-from" :model="form" label-width="80px" size="mini">
          <el-form-item label="昵称：">
            <el-input v-model="form.nickname"></el-input>
          </el-form-item>
          <el-form-item label="介绍：">
            <el-input v-model="form.signature" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="form.gender">
              <el-radio-button :label="0">保密</el-radio-button>
              <el-radio-button :label="1">男</el-radio-button>
              <el-radio-button :label="2">女</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日：">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="选择日期"
                :editable="false"
              >
              </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="edit-img">
          <CutImg :imgUrl="imgUrl" btnText="修改图片" @upload="upload"></CutImg>
        </div>
      </div>
      <div class="submit-wrap">
        <button class="btn btn-red" @click="update">保存</button>
        <button class="btn btn-white" @click="$router.back()">取消</button>
      </div>
    </el-card>
  </div>
</template>

<script>
import CutImg from "@/components/cutImg/CutImg.vue";
import { mapState } from "vuex";
import {updateUserInfo , updloadAvatar} from "@/api/request"
export default {
  components:{CutImg},
  data() {
    return {
      form: {
        nickname: "",
        signature: "",
        gender: 0,
        birthday: {},
      },
      imgUrl: '',
    };
  },
  computed:{
    ...mapState(['profile']),
  },
  created(){
    this.getInfo();
  },
  methods:{
    getInfo(){
      if(Object.keys(this.profile).length !== 0){
        this.imgUrl = this.profile.avatarUrl;
        this.form.nickname =  this.profile.nickname;
        this.form.signature = this.profile.signature;
        this.form.gender = this.profile.gender;
        this.form.birthday = new Date(this.profile.birthday)
      } else {
        setTimeout(() => {
          this.getInfo();
        } , 200)
      }
    },
    async update(){
      const obj = {
        nickname : this.form.nickname,
        signature : this.form.signature,
        gender : this.form.gender,
        birthday : this.form.birthday.getTime()
      }
      const {data:res} = await updateUserInfo(obj);
      if(res.code !== 200) return this.$message.error(res.message);
      this.$message.success('修改成功');
      this.$store.dispatch('getAcount');
    },
    async upload({file , imgSize , imgUrl}){
      this.imgUrl = imgUrl;
      var formData = new FormData();
      formData.append('imgFile',file);
      const imgObj = {
        imgSize : imgSize.width,
        data:formData
      }
      const {data:res} = await updloadAvatar(imgObj);
      if(res.code !== 200) return this.$message.error('上传失败');
      this.$message.success('上传成功');
      this.$store.dispatch('getAcount')

    }
  }
};
</script>

<style lang="less" scoped>
.edit-wrap {
  display: flex;
}
.edit-form{
  width: 500px;
}
/deep/.el-input__inner{
  width: 300px;
  background-color: #fff;
  color: #000;
  border: 1px solid #DCDFE6;
}
.submit-wrap{
  margin: 10px 0 0 80px;
  .btn{
    width: 80px;
    &:nth-child(2){
      margin-left: 20px;
    }
  }
}
.edit-img{
  margin-left: 30px;
}
.el-card {
  padding-left: 200px;
}
</style>